<script setup lang="ts">
import { reactiveComputed } from '@peng_kai/kit/libs/vueuse';
import { useSignUpBonusInfo } from '~comp-b/global-popups/newWallet/ts/depositBonusInfoHook';

const props = withDefaults(defineProps<{
  noticeId: number;
  activeType: 'brazil' | 'pwa';
}>(), {
  activeType: 'brazil',
});
const nowDate = dayjs();
const pwaQueries = useQuery({
  queryKey: [apis.apiActivityInstallPwa.id],
  queryFn: () => apis.apiActivityInstallPwa(undefined),
});

const pwaData = computed(() => pwaQueries.data?.value);
const pwaPeriod = computed(() => {
  return nowDate.add(pwaData.value?.period ? (pwaData.value?.period ?? 0) : 0, 'millisecond').valueOf();
});

const { getSignUpBonusDataRef } = useSignUpBonusInfo(true);
const { luckySpinFirstTipsState } = useFirstRechargeTips();
const currencyStore = useCurrencyStore();
const _noticeId = toRef(props, 'noticeId');
const _activeType = toRef(props, 'activeType');

const state = reactiveComputed(() => {
  const amount = _activeType.value === 'brazil' ? (getSignUpBonusDataRef.value?.bnAmountUsd ?? 15) : Number((pwaData.value?.amount ?? 0));
  const currency = _activeType.value === 'brazil' ? currencyStore.cryptoName : pwaData.value?.currency;
  const onClick = _activeType.value === 'brazil' ? () => toRecharge() : () => globalPopups.sign.open?.({ view: 'signUp' });
  const period = _activeType.value === 'brazil' ? (getSignUpBonusDataRef.value?.timeInfo.expireDate ?? 0) : (pwaPeriod.value ?? 0);
  return {
    amount,
    currency,
    onClick,
    period,
  };
});
function toRecharge() {
  globalPopups.wallet.open({ initTab: 'deposit', isDepositPage: true, checkedBonusKey: 'signUp', source: 'newUser' });
  setTimeout(() => {
    luckySpinFirstTipsState.unRecharge = true;
    globalPopups.newUserAward.close();
  }, 500);
}

onMounted(() => {
  globalPopups.lottery?.close();
});
watchPostEffect(async () => {
  if (_noticeId.value) {
    await apis.apiNoticePersonalRead({ notice_id: _noticeId.value ?? 0 });
  }
});
</script>

<template>
  <div class="px-2 leading-normal">
    <div class="mb-3 h-10 flex-center gap-3 rounded-2 bg-sys-layer-e text-5.5 text-#D8D8D9 font-900">
      <TAmount :value="currencyStore.convert('USD', state.amount, (state.currency as string))" :decimals="2" :symbol="(state.currency === 'DIAMOND' ? 'USDT' : state.currency)" format="original" colored="inherit" iconPos="left" />
    </div>
    <div class="mb-1.5 text-base text-sys-text-body font-600">
      {{ $t('epMmvWrtq9QSstKpJx39a') }}
    </div>
    <!-- <a class="!text-sys-text-marker" @click="globalPopups.signUpBonusPopup.open({ detailData: getSignUpBonusDataRef })">{{ $t('lRe0LkZs7SUyTenmBuEe8') }} <i class="i-flowbite:chevron-right-outline" />  </a> -->
    <div class="countdown my-4 min-h-260px w-full flex-center items-end py-24px">
      <div class="flex-center rounded-2 bg-[rgba(13,13,13,0.7)] pt-2.5 backdrop-blur-3.75px">
        <AStatisticCountdown class="ant-cover__StatisticCountdown-new-user-award" :value="state.period" format="DD : HH : mm : ss ">
          <template #title>
            <div class="flex-between transform-translate-x--1 px-2.5 text-center text-4 text-sys-text-body font-400">
              <span>Days</span>
              <span>Hours</span>
              <span>Min</span>
              <span>Sec</span>
            </div>
          </template>
        </AStatisticCountdown>
      </div>
    </div>

    <AButton class="ant-cover__Button-3d-primary w-full" type="primary" @click="state.onClick()">
      {{ $t('wpztVyna0F7rr_4yJvO8') }}
    </AButton>
  </div>
</template>

<style scoped lang="scss">
.countdown {
  background: url('../../../assets/imgs/new-user-award/bg.png') 50% / cover no-repeat;
}
</style>

<style lang="scss">
.ant-statistic.ant-cover__StatisticCountdown-new-user-award {
  display: flex;
  flex-direction: column;
  .ant-statistic-content {
    display: flex;
  }
  .ant-statistic-content-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 4px;
    padding: 0 10px;
    line-height: normal;
  }
  .ant-statistic-title {
    order: 2;
  }
}
</style>
